<template>
    <div class="wrapper">
        <img 
            v-for="(item,index) of imgList"
            :key="index"
            @tap="multipleTap($event,item)"
            @longpress="delImg(index)"
            :src="item" 
            mode="widthFix"
            class="img"
            @touchstart="touchStart"
             @touchend="touchEnd"
            >
        <div 
            class="uploadImg" 
            @click="uploadImg"
            v-if="imgIdList.length<5"
        >
          <div class="tip1">此处添加图片</div>  
          <div class="tip2">(最多5张，点击替换，双击预览，长按删除)</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            lastTime:'',
            imgList:[],//图片地址
            imgIdList:[],//图片id
            touchStartTime:'',//触碰初始时间戳
            touchEndTime:'',
            lastTapTimeoutFunc:'',//计算触摸事件的定时器
            
        }
    },
    watch: {
        imgIdList(nval){
            this.$emit('hasUploadList',nval)
        }
    },
    methods: {

         /// 按钮触摸开始触发的事件
    touchStart(e) {
        this.touchStartTime = e.timeStamp
    },
 
    /// 按钮触摸结束触发的事件
    touchEnd(e) {
        this.touchEndTime = e.timeStamp
    },
          multipleTap($event,item) {
        var that = this
        var e=$event;
        // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
        if (that.touchEndTime - that.touchStartTime < 350) {
        // 当前点击的时间
        var currentTime = e.timeStamp
        var lastTapTime = that.lastTapTime
        // 更新最后一次点击时间
        that.lastTapTime = currentTime
        
        // 如果两次点击时间在300毫秒内，则认为是双击事件
        if (currentTime - lastTapTime < 300) {
            that.prevImg(item)
            // 成功触发双击事件时，取消单击事件的执行
            clearTimeout(that.lastTapTimeoutFunc);
            
        } else {
            // 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
            that.lastTapTimeoutFunc = setTimeout(function () {
                that.uploadImg()
            }, 300);
        }
        }
    },

        prevImg(current){
            //预览图片
            const urls=this.imgList;
            wx.previewImage({
                current: current, // 当前显示图片的http链接
                urls: urls, // 需要预览的图片http链接列表
                fail:err=>{console.log(err)}
            })
        },
        uploadImg(){
            //上传图片
            let _this=this
            wx.chooseImage({
                success(res) {
                    const tempFilePaths = res.tempFilePaths
                    wx.uploadFile({
                    url: 'https://study.rzkeji.com/api/file/upload-image', // 仅为示例，非真实的接口地址
                    filePath: tempFilePaths[0],
                    name: 'photo',
                    header: {
                    'content-type': 'application/json' // 默认值
                    },
                    success(res) {
                        const data = JSON.parse(res.data)
                        _this.imgList.push(data.data.img_url)
                        _this.imgIdList.push(data.data.id)
                    }
                    })
                }
            })
        },
        delImg(index){
            this.imgList.splice(index,1)
            this.imgIdList.splice(index,1)
        }
    },
    onLoad(){
        this.lastTime='';
        this.imgList=[];//图片地址
        this.imgIdList=[];//图片id
        this.touchStartTime='';//触碰初始时间戳
        this.touchEndTime='';
        this.lastTapTimeoutFunc='';//计算触摸事件的定时器
    }
}
</script>

<style lang="scss" scoped>
    // .wrapper{
    //     margin:10px;
    // }
    .uploadImg{
        border: 2px dashed gray;
        min-height:150px ;
        text-align: center;
        color:rgb(99, 91, 91);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .tip1{
            width: 100%;
            font-size: 18px;
        }
        .tip2{
            width: 100%;
            font-size: 14px;
        }
    }

    .img{
        width: 100%;
    }
</style>
